<template>
  <div class="playSong">
    <div style="display: flex;align-items: center">
      <div style="padding: 0 0.15rem">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wengao-bofang"></use>
        </svg>
      </div>
      <div style="font-size: 0.2rem">播放全部<span>(235)</span></div>
    </div>
    <div style="display: flex">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai"></use>
        </svg>
      </div>
      <div style="padding: 0 0.3rem">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-duoxiangxuanze"></use>
        </svg>
      </div>
    </div>
  </div>
  <div ref="showPlay">
    <div class="songList" v-for="(song,index) in Songinfo" :key="song.id" @click="actionMusic(song,index)">
      <!--      歌曲列表左边-->
      <div class="nav">
        <span style="padding-right:0.05rem;color: rgb(0,0,0,0.5);font-size: 0.3rem;width: 0.5rem;text-align: center" >{{index+1}}</span>
        <div id="SongIsPlay" style="display: none;padding-right: 0.1rem">
          <svg class="icon" aria-hidden="true" style="padding-right:0.1rem;padding-left: 0.05rem">
            <use xlink:href="#icon-bofangzhong"></use>
          </svg>
        </div>
        <div style="line-height: 0.25rem">
          <div style="font-size: 0.2rem" class="SongLength">{{song.name}}</div>
          <div style="font-size: 0.14rem;color: rgb(0,0,0,0.5)" class="SongLength">{{showName(song.ar)}}-{{song.name}}</div>
        </div>
      </div>
      <!--      歌曲右边-->
      <div class="nav">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
        </div>
        <div style="padding: 0 0.3rem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sangedian"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import show from "@/hooks/userShowName";
import {ref} from "vue";
import {useStore} from "vuex";
export default {
  name: "SongList",
  props:['Songinfo'],
  setup(props){
    const store=useStore()
    let showName=ref(show)
    let showPlay=ref(null)
    const method={
      actionMusic(id,index){
        console.log("123")
        console.log(id)
        store.commit('sendID',id)
        store.commit('changeState')
        let allSong=showPlay.value.childNodes
        // console.log(allSong)
        for(let i=1;i<allSong.length-1;i++){
          // console.log(allSong[i].childNodes[1])
          allSong[i].childNodes[1].childNodes[0].style.display="block"
          allSong[i].childNodes[1].childNodes[1].style.display="none"
        }
        allSong[index+1].childNodes[1].childNodes[0].style.display="none"
        allSong[index+1].childNodes[1].childNodes[1].style.display="block"
        // e.currentTarget.firstElementChild.childNodes[0].style.display="none"
        // e.currentTarget.firstElementChild.childNodes[1].style.display="block"
      },
    }
    return{
      showPlay,
      showName,
      ...method
    }
  }
}
</script>
<style scoped>
.songList {
  display: flex;
  justify-content: space-between;
  font-size: 0.3rem;
  padding:0.15rem 0;
}
.nav {
  display: flex;
  align-items: center;
}
.playSong{
  font-size:0.3rem;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
}
.songList:active{
  background-color:rgb(0,0,0,0.4);
}
.SongLength{
  width: 4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
</style>